<template>
	<div class="ratings" ref="ratings">
    <div class="content">
      <div class="ratings-view">
        <div class="left border-1px-x">
          <div class="num">{{seller.score}}</div>
          <div class="numdes">综合评分</div>
          <div class="desc">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="right">
          <div class="item">食物评分
            <div class="item-value">
              <star :size="36" :score="seller.foodScore" :max="5"></star>
              <span class="num">{{seller.foodScore}}</span>
            </div>
          </div>
          <div class="item">服务态度
            <div class="item-value">
              <star :size="36" :score="seller.serviceScore" :max="5"></star>
              <span class="num">{{seller.serviceScore}}</span>
            </div>
          </div>
          <div class="item">送达时间
            <div class="item-value">{{seller.deliveryTime}}分钟</div>
          </div>
        </div>
      </div>
      <split></split>
      <div class="ratings-box">
        <div class="ratings-header">
          <h1 class="title">商品评论</h1>
          <div class="btns">
            <span class="btn all" :class="{active:showType=='all'}" @click="showType='all'">全部 <span class="num">{{ratings.length}}</span></span>
            <span class="btn good" :class="{active:showType=='good'}" @click="showType='good'">满意 <span class="num">{{goodratings.length}}</span></span>
            <span class="btn bad" :class="{active:showType=='bad'}" @click="showType='bad'">不满意 <span class="num">{{badratings.length}}</span></span>
          </div>
          <div class="filter-btn" :class="{active:showContent}" @click="showContent=!showContent">
            <i class="fa fa-check-circle"></i>
            <span class="text">只看有内容的评价</span>
          </div>
        </div>
        <div class="ratings-body">
          <span v-if="ratings.length==0" class="no-msg">暂无评价</span>
          <ul v-else>
            <li class="rating-item" v-for="rating in ratings" v-show="showRating(rating.text,rating.rateType)" :key="rating.rateTime">
             <div class="content">
               <img class="user-img" :src="rating.avatar" width="28" height="28">
               <div class="content-text">
                 <div class="tel">{{rating.username}}</div>
                 <div class="star-contet">
                   <star :size="24" :score="seller.foodScore" :max="5"></star>
                   <span class="text">{{rating.deliveryTime}}分钟送达</span>
                 </div>
                 <p class="text">{{rating.text}}</p>
                 <div class="bottom">
                   <i class="fa fa-thumbs-up" v-if="rating.rateType==0"></i>
                   <i class="fa fa-thumbs-down" v-else></i>
                   <ul>
                     <li class="com-item" v-for="rec of rating.recommend">
                       {{rec}}
                     </li>
                   </ul>
                 </div>
               </div>
             </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import star from '../star/star.vue'
import split from '../split.vue'
import Scroll from 'better-scroll'
import ajax from '@data'
export default {
  created(){
    ajax.ratings().then((data)=>{
      this.ratings = data.ratings;
      this.$nextTick(()=>{
        this.ratingsScroll = new Scroll(this.$refs.ratings,{
          click:true
        });
      })
    });
  },
  mounted(){

  },
  props:{
    seller:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data () {
    return {
      ratings:[],
      scroll:null,
      showContent:true,
      showType:"all",//all good bad
      ratingsScroll:null
    }
  },
  methods:{
    showRating(text,type){
      if(this.showContent&&!text){
        return false
      }
      if(this.showType=="good"){
        return type==0
      }
      if(this.showType=="bad"){
        return type==1
      }
      return true
    },
  },
  computed:{
    goodratings(){
      if(this.ratings){
        return this.ratings.filter(v=>v.rateType===0);
      }
      return []
    },
    badratings(){
      if(this.ratings){
        return this.ratings.filter(v=>v.rateType===1);
      }
      return []
    }
  },
  filters:{
    fmtDate(time){
      Date.prototype.format = function(fmt) {
        var o = {
          "Y+" : this.getFullYear(),
          "M+" : this.getMonth() + 1,
          // 月份
          "d+" : this.getDate(),
          // 日
          "h+" : this.getHours() % 12 == 0 ? 12 : this.getHours() % 12,
          // 小时
          "H+" : this.getHours(),
          // 小时
          "m+" : this.getMinutes(),
          // 分
          "s+" : this.getSeconds(),
          // 秒
          "q+" : Math.floor((this.getMonth() + 3) / 3),
          // 季度
          "S" : this.getMilliseconds()
          // 毫秒
        };
        var week = {
          "0" : "日",
          "1" : "一",
          "2" : "二",
          "3" : "三",
          "4" : "四",
          "5" : "五",
          "6" : "六"
        };
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
            .substr(4 - RegExp.$1.length));
        }
        if (/(E+)/.test(fmt)) {
          fmt = fmt
            .replace(
              RegExp.$1,
              ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "/u661f/u671f"
                : "/u5468")
                : "")
              + week[this.getDay() + ""]);
        }
        for ( var k in o) {
          if (new RegExp("(" + k + ")").test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
              : (("00" + o[k]).substr(("" + o[k]).length)));
          }
        }
        return fmt;
      };
      return new Date(time).format("yyyy-MM-dd HH:mm:ss")
    }
  },
  watch:{
  	
  },
  components:{
    star,split
  }
}
</script>

<style  lang="stylus" rel="stylesheet/styleus">
@import "../../common/stylus/mixin"
.ratings
  position absolute
  top 174px
  left 0
  bottom 0
  width 100%
  overflow hidden
  .ratings-view
    padding 18px
    display flex
    .left
      flex 4
      text-align center
      position relative
      &:after
        position absolute
        top 0px
        bottom 0px
        right 0
        border-right 1px solid rgba(7,17,27,.1)
        content ''
      .num
        font-size 24px
        color rgb(255,153,0)
        margin-bottom 6px
      .numdes
        font-size 12px
        margin-bottom 8px
      .desc
        font-size 10px
        color: rgb(147,153,159)
    .right
      flex 6
      padding-left 24px
      font-size 0
      .item
        margin-bottom 8px
        font-size 12px
        &:last-child
          margin-bottom 0
        .item-value
          padding-left 8px
          display inline-block
          vertical-align top
          color: rgb(147,153,159)
          .num
            font-size 0px
            line-height 16px
            display inline-block
            vertical-align top
            color rgb(255,153,0)
  .ratings-box
    font-size 0
    .ratings-header
      padding 18px
      border-bottom 1px solid rgba(7,17,27,.1)
      .title
        font-size 14px
      .btns
        padding 16px 0 18px 0
        border-bottom 1px solid rgba(7,17,27,.1)
        .btn
          padding 8px 12px
          border-radius 2px
          font-size 12px
          background-color rgba(0,160,220,.2)
          margin-right 8px
          display inline-block
          .num
            font-size 9px
          &.good
            background-color rgba(0,160,220,.2)
          &.active
            color #ffffff
            background-color rgba(0,160,220,1)
          &.bad
            background-color rgba(77,85,93,.2)
            &.active
              background-color rgba(77,85,93,1)
      .filter-btn
        padding-top 12px
        &.active
          .fa-check-circle
            color #009A53
        .fa-check-circle
          font-size 24px
          color rgb(147,153,159)
          margin-right 4px
        .text
          font-size 12px
          color: rgb(147,153,159)
          position relative
          top -3px
    .ratings-body
      padding 0 16px
      .no-msg
        font-size 12px
        padding 16px 0
        color rgb(147,153,159)
        display inline-block
      .rating-item
        padding 16px 0
        border-bottom 1px solid rgba(7,17,27,.1)
        &:last-child
          border-bottom none
        .content
          display flex
          .user-img
            flex 0 0 28px
            border-radius 50%
          .content-text
            padding-left 12px
            .tel
              font-size 10px
              margin-bottom 4px
            .star-contet
              margin-bottom 6px
              .text
                font-size 10px
                color: rgb(147,153,159)
                padding-left 6px
            .text
              font-size 12px
              line-height 18px
              text-align justify
              margin-bottom 8px
            .bottom
              display flex
              .fa
                flex 0 0 12px
                font-size 12px
                vertical-align top
                &.fa-thumbs-up
                  color rgb(0,160,220)
                &.fa-thumbs-down
                  color rgb(147,153,159)
              .com-item
                display inline-block
                margin-left 8px
                margin-bottom 4px
                font-size 9px
                border-radius 1px
                border 1px solid rgba(7,17,27,.1)
                padding 0 6px
                color rgb(147,153,159)
                line-height 16px
</style>
